<template>
  <el-container>
    <el-header>
      <div style="margin-top: 10px">
        <el-row class="demo-autocomplete">
          <el-col :span="6">
            <el-input
              v-model="search"
              size="small"
              placeholder="根据邮件的主题模糊搜索"
              @change="detect(tableDataStorage)"
              suffix-icon="el-icon-date"
            />
          </el-col>
        </el-row>
      </div>
    </el-header>

    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="emlName" label="邮件名称" show-overflow-tooltip width="300"></el-table-column>
        <el-table-column prop="subject" label="邮件主题" show-overflow-tooltip width="180"></el-table-column>
        <el-table-column prop="emlPath" label="邮件全地址" show-overflow-tooltip width="180"></el-table-column>
        <el-table-column prop="tag" label="标签" width="100" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.tag === '网易邮箱' ? 'primary' : 'success'"
              disable-transitions
            >{{scope.row.tag}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: -40px;float:left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[6, 8, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
    </el-footer>
    <!-- dialog 删除 -->
    <el-dialog title="删除服务器资源" :visible.sync="dialogDelete">
      <el-form :model="onejilu">
        <p>你确定要删除服务器中上传的邮件吗?</p>
        <p>
          邮件索引:index {{onejilu.index}},
          <br />
          邮件信息：---{{onejilu.item}}，
        </p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false">取 消</el-button>
        <el-button type="primary" @click="dialogDelete = false;finalDelete(onejilu)">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "axios";
import { emlPath } from "./config/config";
export default {
  data() {
    return {
      tableData: [],
      tableDataStorage: [], //tableDataStorage保存tableData一样的数据
      multipleSelection: [],
      //分页
      currentPage: 1, //初始页
      pagesize: 6, //    初始每页的数据
      //模糊搜索
      search: "",
      //dialog
      dialogDelete: false,
      onejilu: {}
    };
  },
  created() {
    this.getInit();
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    async getInit() {
      axios
        .get("/api/EmlServerController/serverEmls/allemls?userName=" + this.userSO_json.userName, {
          headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let list = response.data.data;
           if (list.length==0) {
             this.$message({
            showClose: true,
            message: "服务器中暂无您的邮件，请先上传邮件",
            type: "warning"
          });
          }
          console.log(list);
          // 后端的list<map>传到前端=》{xxx:"xxxxxxx",yyy:"yyyyyyyy"}
          //相当于变成了一个大对象，里面有key-value类型的字段属性
          for (var i = 0; i < list.length; i++) {
            var emlName = list[i].emlName;
            var subject = list[i].subject;
            let senderAddress = list[i].senderAddress;
            var tag = null;
            if (senderAddress.split("163").length != 1) {
              tag = "网易邮箱";
            } else if (senderAddress.split("qq").length != 1) {
              tag = "腾讯邮箱";
            } else if (senderAddress.split("edu").length != 1) {
              tag = "教育邮箱";
            } else {
              tag = "公司邮箱";
            }
            //封装成集合[{},{}，{}，{}]
            this.tableData.push({
              emlName: emlName,
              subject: subject,
              tag: tag,
              emlPath: emlPath[0] + "/" + this.userSO_json.userName+"/"+emlName
            });

            this.tableDataStorage = this.tableData;
          }
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "该用户没有上传邮件，请先上传至服务器",
            type: "warning"
          });
        });
      console.log("this.tableData", this.tableData[1]);
    },

    //分页
    // 初始每页数据数pagesize
    handleSizeChange(size) {
      this.pagesize = size;
    },
    //初始页currentPage
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    //模糊搜索

    detect(val) {
      let temp = [];
      let self = this;
      temp = JSON.parse(JSON.stringify(val)); //JSON化可以避免引用赋值
      let search = this.search;
      let count = 0;
      for (let i = 0; i < temp.length; i++) {
        //split对字符串分割后返回的是数组，所以如果没有被关键字分割那么返回值的长度就是1,然后将没有被分割的对象删除
        if (temp[i].subject.split(search).length == 1) {
          console.log(temp[i].subject);
          temp.splice(i, 1); //这种删除方式会自动更新长度，慎用
          i--;
          count++;
          console.log("删除");
        }
      }

      console.log(count);
      self.tableData = temp;
    },

    handleDelete(index, row) {
      this.dialogDelete = true;
      //row的结构是{"xxx":"xxx","yyy":"yyy"...}
      //onejilu前端对象{index:value,item:{value},...}
      this.onejilu.index = (this.currentPage - 1) * this.pagesize + index; //给前端删除条件
      this.onejilu.item = row; //给后端删除条件
    },
    finalDelete() {
      //后端删除
      axios
        .get(
          "/api/EmlServerController/deleteEml?absolutePath=" +
            this.onejilu.item["emlPath"],
          {
            headers: {
              //头部信息
              "Content-Type": "application/json;charset=utf-8",
              token: this.userSO_json.token
            }
          }
        )
        .then(response => {
          let obj = response.data.data;
          console.log(obj + this.onejilu.item["emlPath"]);
          if (obj == true) {
            this.$message({
              showClose: true,
              message: "恭喜你，这是一条删除成功消息",
              type: "success"
            });
          }
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
      //前端删除
      this.tableData.splice(this.onejilu.index, 1);
      this.tableDataStorage.splice(this.onejilu.index, 1);
    }
  }
};
</script>

<style  scoped>
.el-footer {
  height: 40px;
  width: 100%;
  background-color: #ddd;
  position: fixed;
  bottom: 0;
}
</style>




